<template>
  <div class="add-interview-container">
    <!-- 头部导航栏 -->
    <el-header class="header">
      <div class="logo">职途导师</div>
      <el-menu 
        mode="horizontal" 
        :default-active="activeMenu" 
        class="nav-menu"
        router
      >
        <el-menu-item index="/home">主页</el-menu-item>
        <el-menu-item index="/pending-interviews">待面试列表</el-menu-item>
        <el-menu-item index="/interview-history">面试历史记录</el-menu-item>
      </el-menu>
      <div class="user-info">
        <el-dropdown>
          <span class="user-dropdown">
            <el-avatar :size="32" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            <span class="username">用户名</span>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>设置</el-dropdown-item>
              <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    
    <!-- 内容主体 -->
    <el-main class="main-content">
      <div class="page-header">
        <h2 class="page-title">添加面试</h2>
        <el-button @click="goBack">返回</el-button>
      </div>
      
      <el-card class="form-card">
        <el-form 
          ref="formRef"
          :model="interviewForm"
          :rules="formRules"
          label-position="top"
          status-icon
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="公司名称" prop="company">
                <el-input v-model="interviewForm.company" placeholder="请输入公司名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="职位名称" prop="position">
                <el-input v-model="interviewForm.position" placeholder="请输入职位名称" />
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="面试日期" prop="date">
                <el-date-picker
                  v-model="interviewForm.date"
                  type="date"
                  placeholder="请选择面试日期"
                  style="width: 100%"
                  :disabled-date="disablePastDates"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="面试时间" prop="time">
                <el-time-picker
                  v-model="interviewForm.time"
                  format="HH:mm"
                  placeholder="请选择面试时间"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="面试类型" prop="type">
                <el-select v-model="interviewForm.type" placeholder="请选择面试类型" style="width: 100%">
                  <el-option label="技术面试" value="技术面试" />
                  <el-option label="HR面试" value="HR面试" />
                  <el-option label="综合面试" value="综合面试" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="面试时长(分钟)" prop="duration">
                <el-input-number
                  v-model="interviewForm.duration"
                  :min="15"
                  :max="120"
                  :step="15"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-form-item label="面试地点" prop="location">
            <el-radio-group v-model="interviewForm.locationType">
              <el-radio label="online">线上面试</el-radio>
              <el-radio label="offline">线下面试</el-radio>
            </el-radio-group>
            
            <div v-if="interviewForm.locationType === 'online'" class="location-input">
              <el-input v-model="interviewForm.onlineLink" placeholder="请输入线上面试链接" />
            </div>
            <div v-else class="location-input">
              <el-input v-model="interviewForm.offlineAddress" placeholder="请输入线下面试地址" />
            </div>
          </el-form-item>
          
          <el-form-item label="备注" prop="notes">
            <el-input
              v-model="interviewForm.notes"
              type="textarea"
              rows="3"
              placeholder="请输入面试备注、需要准备的材料等"
            />
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="submitForm">添加面试</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-main>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';

const router = useRouter();
const activeMenu = ref('/pending-interviews');
const formRef = ref<FormInstance>();

// 表单数据
const interviewForm = reactive({
  company: '',
  position: '',
  date: null,
  time: null,
  type: '',
  duration: 60,
  locationType: 'online',
  onlineLink: '',
  offlineAddress: '',
  notes: ''
});

// 表单验证规则
const formRules = reactive<FormRules>({
  company: [
    { required: true, message: '请输入公司名称', trigger: 'blur' },
    { max: 50, message: '公司名称不能超过50个字符', trigger: 'blur' }
  ],
  position: [
    { required: true, message: '请输入职位名称', trigger: 'blur' },
    { max: 50, message: '职位名称不能超过50个字符', trigger: 'blur' }
  ],
  date: [
    { required: true, message: '请选择面试日期', trigger: 'change' }
  ],
  time: [
    { required: true, message: '请选择面试时间', trigger: 'change' }
  ],
  type: [
    { required: true, message: '请选择面试类型', trigger: 'change' }
  ],
  duration: [
    { required: true, message: '请设置面试时长', trigger: 'change' }
  ]
});

// 禁用过去的日期
const disablePastDates = (date: Date) => {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  return date.getTime() < today.getTime();
};

// 提交表单
const submitForm = async () => {
  if (!formRef.value) return;
  
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      // 这里应该是提交表单的API请求
      console.log('提交表单:', interviewForm);
      
      ElMessage({
        type: 'success',
        message: '面试添加成功'
      });
      
      // 跳转回面试列表页面
      router.push('/pending-interviews');
    } else {
      console.log('表单验证失败:', fields);
      ElMessage({
        type: 'error',
        message: '请填写完整的面试信息'
      });
    }
  });
};

// 重置表单
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields();
    interviewForm.locationType = 'online';
    interviewForm.duration = 60;
  }
};

// 返回上一页
const goBack = () => {
  router.back();
};

// 退出登录
const handleLogout = () => {
  localStorage.removeItem('isLoggedIn');
  router.push('/login');
};
</script>

<style scoped>
.add-interview-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  align-items: center;
  padding: 0 20px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 999;
}

.logo {
  font-size: 22px;
  font-weight: bold;
  color: #1890ff;
  margin-right: 40px;
}

.nav-menu {
  flex: 1;
  border-bottom: none;
}

.user-info {
  margin-left: 20px;
}

.user-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.username {
  margin-left: 8px;
}

.main-content {
  padding: 20px;
  background-color: #f5f7fa;
  flex: 1;
  overflow-y: auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.form-card {
  margin-bottom: 20px;
}

.location-input {
  margin-top: 10px;
}
</style> 